<template>
	<div>
		<div class="left noScroll">
			<NewSection imgType="3" :type="1" title="人员监控" @onClickRightIcon="onClickMonitor">
				<!-- NewSection的rightIcon属性2021年6月17日暂时去掉 -->
				<div class="left-person">
					<div class="left-person-item">
						<i-circle :percent="ryjk_online_rate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<Icon custom="i-icon icon-zaixian2" size="24" color="#fff" />
						</i-circle>
						<div class="flex-1 m-l-25">
							<p class="fs-16 flex a-center j-between">
								<span>在线情况</span>
							</p>
							<div class="flex fs-16">
								<p class="flex-1">
									<span class="">{{ryjk_online_rate}}</span>%
								</p>
							</div>
						</div>
						<p class="flex-1 fs-20">
							<span class="">{{ryjk_online}}</span>/<span class="">{{ryjk_total}}</span>
						</p>
						<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
							@click.stop="onClickGenItem(0)" />
					</div>
					<div class="left-person-item">
						<i-circle :percent="ryjk_chuqin_rate" :size="70" :trail-width="10" trail-color="#272c2f"
							:stroke-width="10" stroke-color="#00BAFF">
							<Icon custom="i-icon icon-kaoheguanli" size="24" color="#fff" />
						</i-circle>
						<div class="flex-1 m-l-25">
							<p class="fs-16 flex a-center j-between">
								<span>出勤情况</span>
							</p>
							<div class="flex fs-16">
								<p class="flex-1">
									<span class="">{{ryjk_chuqin_rate||'0'}}</span>%
								</p>
							</div>
						</div>
						<div class="flex-1 fs-20">
							<span class="">{{ryjk_chuqin||'0'}}</span>/<span class="">{{ryjk_total||'0'}}</span>
						</div>
						<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer"
							@click.stop="onClickGenItem(1)" />
					</div>
				</div>
			</NewSection>
			<Modal v-model="genDetailVisible" :mask="false" footer-hide closable :z-index="600" width="392"
				:styles="{left:'420px',margin:'0',top: '110px'}" @on-visible-change="onChangeGenDetailVisible"
				v-click-outside="handlerCloseGenDetail">
				<div class="left-top-detail">
					<div class="left-top-person">
						<header>
							<div class="left-top-person-name">
								{{currentGenListIndex == 0 ? '在线情况' : '出勤情况'}}
							</div>
							<Icon custom="i-icon ivu-icon-ios-close" size="40" class="cursor-pointer"
								@click="genDetailVisible = false" />
						</header>
						<section>
							<div class="section-top">
								<span class="fs-16">{{currentGenListIndex == 0 ? '总在线：' : '总出勤：'}}</span>
								<span class="fs-20 text-white">{{currentGenListIndex == 0 ? ryjk_online : ryjk_chuqin}}
									/
									{{ryjk_total}}</span>
							</div>
							<template v-for="(item,index) in personArr">
								<div class="left-top-person-item cursor-pointer" :key="index"
									@click.stop="onClickGenDetailItem('人员',item.workTypeName,3)" v-if="item.num != 0">
									<img src="../../../../assets/new/new_work_1.png">
									<div class="left-top-person-item-num">
										{{item.workTypeName}}:
									</div>
									<div>
										<span
											class="fs-26">{{currentGenListIndex == 0 ? item.onlineCount : item.chuQinCount}}</span>
										<span class="fs-26"> /
											{{currentGenListIndex == 0 ? item.onlineTotal : item.chuQinTotal}}</span>
									</div>
								</div>
							</template>
						</section>
						<div class="left-top-person-footer"></div>
					</div>
				</div>
			</Modal>
			<!-- 2021年6月17日暂时隐藏 -->
			<NewSection icon="icon-danwei" title="单位情况" v-if="false">
				<div class="left-company">
					<div class="left-company-list">
						<div class="noData">
							<img src="../../../../assets/main/blank_black.png" style="cursor: default;">
							<p>暂无数据</p>
						</div>
					</div>
				</div>
			</NewSection>
		</div>
		<div class="right noScroll">
			<div class="right-content" v-if="personConfig.length>0">
				<header>
					<div class="fs-16">
						<img src="../../../../assets/new/new_comp.png">
						人员配置
					</div>
				</header>
				<div class="right-person">
					<div v-for="(item,index) in personConfig" :key="index">
						<div class="right-person-item" v-if="item.workTypeNumber>0">
							<div class="right-person-item-top">
								<span class="fs-14">{{item.workTypeName}}</span>
								<span class="fs-14 fw-700">{{item.workTypeNumber}}人</span>
							</div>
							<Progress :percent="item.percentage" hide-info :stroke-width="14"
								:stroke-color="['#2090BB','#02B8FC']" />
						</div>
					</div>
				</div>
				<div class="left-top-footer"></div>
			</div>

			<NewSection imgType="newWork" :type="2" title="作业出勤" rightIcon @onClickRightIcon="onClickWork(true)">
				<div class="right-work">
					<div class="right-work-top">
						<div class="flex a-center">
							<Icon custom="i-icon icon-jinrijihua" size="45" class="m-r-15" />
							<div>
								<p>当前计划</p>
								<span>{{zycq_todayPlan || 0}}</span>
							</div>
						</div>
						<div class="line"></div>
						<div>
							<p>已完成</p>
							<span>{{zycq_ywc || 0}}</span>
						</div>
						<div>
							<p>作业中</p>
							<span>{{zycq_jxz || 0}}</span>
						</div>
						<div>
							<p>未完成</p>
							<span style="color: rgb(233, 111, 25);">{{zycq_wwc || 0}}</span>
						</div>
					</div>
					<img src="../../../../assets/new/new_line.png" class="right-work-img">
					<div class="right-work-bottom">
						<div class="right-work-bottom-item fs-14">
							<span>正常出勤</span>
							<span class="fs-19 fw-700 m-l-12" style="color: #6DCF9A;">{{zycq_zccq||0}}</span>
						</div>
						<div class="right-work-bottom-item fs-14">
							<span>请假</span>
							<span class="fs-19 fw-700 m-l-12" style="color: #03B7FA;">{{zycq_qingjia||0}}</span>
						</div>
						<div class="right-work-bottom-item fs-14">
							<span>缺考/旷工</span>
							<span class="fs-19 fw-700 m-l-12" style="color: #F8B551;">{{zycq_qkkg||0}}</span>
						</div>
						<div class="right-work-bottom-item fs-14">
							<span>迟到/早退</span>
							<span class="fs-19 fw-700 m-l-12" style="color:#FF3333;">{{zycq_cdzt||0}}</span>
						</div>
					</div>
				</div>
			</NewSection>
			<!-- 2021年6月17日暂时隐藏 -->
			<NewSection icon="icon-xunzhang" title="今日成果" v-if="false">
				<div class="right-result">
					<div class="right-result-top">
						<div class="right-result-top-item">
							<p>作业圈数</p>
							<span>0</span>
							<Icon custom="i-icon icon-quanshu" size="50" class="right-result-top-icon" />
						</div>
						<div class="right-result-top-item">
							<p>完成路段</p>
							<span>0</span>
							<Icon custom="i-icon icon-xianlu3" size="50" class="right-result-top-icon" />
						</div>
						<div class="right-result-top-item">
							<p>问题上报</p>
							<span>0</span>
							<Icon custom="i-icon icon-xunchashangbao" size="50" class="right-result-top-icon" />
						</div>
					</div>
					<div class="right-result-bottom">
						<div class="right-result-bottom-top">
							<div>
								作业总时长
								<span class="fs-32 fw-700 m-l-15" style="color: #6ee3c6;">0h</span>
							</div>
							<div class="proportion">
								环比昨日&nbsp;
								<span class="m-l-10" style="color: #32b16c;">
									0%
									<Icon custom="i-icon icon-xiajiang1" size="16" color="rgb(50, 177, 108)" />
								</span>
							</div>
						</div>
						<Echarts height="65px" :options="resultOptions"></Echarts>
					</div>
				</div>
			</NewSection>
		</div>


		<!-- 作业实况 -->
		<div v-if="sceneListVisible" class="modal-detail">
			<div class="modal-detail-top cursor-pointer" @click.stop="reset">
				<img src="../../../../assets/new/new_img_back.png">
				作业实况
			</div>
			<div class="right-worklist">
				<div class="right-work-bottom">
					<div class="right-work-bottom-search">
						<Icon type="ios-search" size="24" color="#fff" />
						<Input v-model="workSceneSearchValue" placeholder="" :border="false" clearable
							style="margin-left: 5px;" />
					</div>
					<div class="right-work-switch flex j-end">
						<span>全部</span>
						<i-switch v-model="workSceneSearchSwitch" />
						<span>参与工作</span>
					</div>
					<div class="right-work-line">
						<img src="../../../../assets/new/new_img_line.png">
					</div>
					<!-- 单选框样式暂时隐藏 -->
					<!-- <div class="flex j-end fs-16 m-b-10"
               style="color:#fff">
            <RadioGroup v-model="workSceneSearchRadio">
              <Radio label="all">
                <span>全部</span>
              </Radio>
              <Radio label="work">
                <span>参与工作</span>
              </Radio>
            </RadioGroup>
          </div> -->
					<div class="right-work-bottom-list">
						<div class="right-work-bottom-item fs-15" v-for="(item, index) in workSceneList" :key="index"
							v-show="filterWorkSceneList(item)">
							<div class="flex a-center j-between">
								<div class="line1" style="max-width:180px">
									{{item.planName}}
								</div>
								<div class="flex a-center">
									<!-- {{item.rptCarWork.workTypeName}} -->
									<Icon custom="i-icon icon-jiantou2" size="18" class="cursor-pointer m-l-5"
										@click="onClickWorkList(item)" />
								</div>
							</div>
							<div class="flex j-between fs-15 m-t-10 m-b-8">
								<div>
									{{item.kaoQinName}}({{item.startTime}}~{{item.endTime}})
								</div>
								<div class="flex a-center">
									<span class="m-r-10">完成度:{{ item.degreeCompletion }}%</span>
								</div>
							</div>
							<Progress :percent="item.degreeCompletion" hide-info
								:stroke-color="['#339bc1','#318dc1']" />
						</div>
						<infinite-loading @infinite="getSearchPageList" :distance="10" ref="infiniteLoading" v-if="sceneListVisible">
							<div slot="no-more">
								<div style="color: #ccc;margin-top: 20px;">
									没有更多数据了
								</div>
							</div>
						</infinite-loading>
					</div>
				</div>
			</div>
		</div>

		<!-- 作业实况详情 -->
		<div v-if="sceneDetailVisible" class="modal-detail">
			<div class="modal-detail-top cursor-pointer" @click.stop="onClickSceneDetailClose">
				<img src="../../../../assets/new/new_img_back.png">
				作业详情
			</div>
			<div class="case-detail-cont noScroll">
				<div class="case-detail-cont-msg">
					<div class="case-detail-cont-msg-msg">
						<div class="flex j-between w-full m-b-10">
							{{ sceneDetail.planName }}
							<!-- <p class="min-w-80 text-right">{{ sceneDetail.workTypeName }}</p> -->
						</div>
						<div>
							{{ sceneDetail.shiftName }}（{{ sceneDetail.sbsj }}~{{ sceneDetail.xbsj }}）
						</div>
						<div class="flex a-center j-between m-t-10" v-if="sceneDetail.userName||sceneDetail.userPhone">
              <div class="flex">
                <span :title="sceneDetail.depName" style="max-width: 120px;" class="line1">{{sceneDetail.depName}}</span>
                <span>：{{sceneDetail.userName}}</span>
              </div>
							<span>{{sceneDetail.userPhone}}</span>
						</div>
					</div>
					<!-- <div class="case-detail-cont-msg-type">
            {{sceneDetail.type}}
          </div> -->
				</div>
				<div class="case-detail-cont-list">
					<div class="list-item" v-for="(item, index) in sceneDetail.workPlanCars" :key='index'>
						<div class="list-item-line">
							<img src="../../../../assets/new/new_img_line.png">
						</div>
						<div class="flex a-center j-between title">
							<p class="title-left cursor-pointer" style="flex: 1.5;"
								@click.stop="onClickWorkDetail(item)">
								<!-- <img src="../../../../assets/new/new_car_work_detail1.png" class="list-item-car"> -->
								<span>{{item.empName}}</span>
							</p>
							<p class="title-right">
								<!-- {{item.employeeName}} -->
							</p>
							<img src="../../../../assets/new/new_car_work_detail2.png"
								class="list-item-img cursor-pointer" @click.stop="onClickTrack(item)">
						</div>
						<ul class="cont">
							<li class="flex a-center j-between min-w-100">
								<p>{{ sceneDetail.gridName }}</p>
								<p>完成度:{{item.degreeCompletion}}%</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>


		<!-- 左 人员监控图标 -->
		<Modal v-model="monitorVisible" title="人员监控" width="400" footer-hide :mask="false"
			:styles="{left:'8px',top:'80px',margin:'0'}">
			<Tabs :animated="false" @on-click="onClickMonitorTabs">
				<TabPane v-for="(item,index) in monitorCaseList" :key="index" :label="item.title">
					<MainSearchTabs :data="item.list" :searchVisible="searchMonitorVisible" :treeData="personTreeData"
						:tree="peopleTreeValue" @onClickTabItem="onClickMonitorTab"
						@onClickInputIcon="onClickMonitorInputIcon" @onClickDeleteInput="onClickMonitorDeleteInput">
					</MainSearchTabs>
					<!-- <MainSearchTabs :data="item.list" :treeData="carTreeData" :tree="carTreeValue" :searchVisible="searchCarVisible" @onClickTabItem="onClickCarCaseTab" @onClickInputIcon="onClickCarInputIcon" @onClickDeleteInput="onClickCarDeleteInput"></MainSearchTabs> -->
				</TabPane>
			</Tabs>
			<div class="monitor">
				<div class="monitor-work noScroll">
					<div class="monitor-work-item" v-for="(item) in workList" :key="item.id"
						v-show="monitorTapsIndex == 0">
						<img src="../../../../assets/main/personImg1.png" alt="">
						<div class="item-right">
							<div class="item-right-row1">
								<div class="item-right-row1-left">
									{{item.name}}
									<span>[{{item.type}}]</span>
									<Icon custom="i-icon icon-genzongdingwei" size="18"
										color="rgba(255,255,255,0.65)" />
								</div>
								<div class="item-right-row1-right">
									<div :class="{'status-in' : item.status == 1}">{{item.status == 1 ? '在线' : '离线'}}
									</div>
								</div>
							</div>
							<div class="item-right-row2">
								<span>{{item.rank}}{{item.name}}</span>
								<span>{{item.classes}}</span>
							</div>
						</div>
					</div>

					<div class="monitor-case-item" v-for="(item) in caseList" :key="item.id + 'only'"
						v-show="monitorTapsIndex == 1">
						<div class="monitor-case-item-top">
							<img src="../../../../assets/main/personImg1.png" alt="">
							<div class="item-top-right">
								<div class="item-top-right-row1">
									{{item.name}}
									<span>[{{item.type}}]</span>
									<Icon custom="i-icon icon-guiji" size="18" color="rgba(255,255,255,0.65)" />
								</div>
								<div class="item-top-right-row2">
									<div class="item-top-right-row2-left">{{item.rank}}{{item.name}}</div>
									<div class="item-top-right-row2-right">
										出勤情况
										<div class="item-top-right-row2-right-status">
											<div :class="{'status-in' : item.status == 0}">
												{{item.status == 0 ? '异常' : '正常'}}
											</div>
										</div>
									</div>
								</div>
								<div class="item-top-right-row3">
									<div>作业情况</div>
									<div @click="onClickMonitorCase(item)">
										异常{{item.count}}
										<Icon custom="i-icon icon-xiajiantou1" size="16" class="icon"
											:class="{'icon-in':item.unusual}" />
									</div>
								</div>
							</div>
						</div>

						<div class="monitor-case-item-bottom" v-show="item.unusual">
							<div class="item-bottom-item">
								<div class="item-bottom-item-name">
									<div class="icon"></div>
									早班 (05:00-11:00)
								</div>
								<div class="item-bottom-item-status">
									<span>缺考</span>(--)
									-
									<span>缺考</span>(--)
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import bus from '@/utils/bus'
	import NewSection from '../subject/NewSection';
	import MainSearchTabs from '../template/MainSearchTabs';
	import Echarts from '../../../common/Echarts';
	import vClickOutside from 'v-click-outside'
	import InfiniteLoading from 'vue-infinite-loading';
	export default {
		components: {
			NewSection,
			Echarts,
			InfiniteLoading,
			MainSearchTabs
		},
		directives: {
			clickOutside: vClickOutside.directive
		},
		props: {
			search: Boolean
		},
		data() {
			return {
				ryjk_total: 0,
				ryjk_online: 0,
				ryjk_online_rate: 0,
				ryjk_chuqin: 0,
				ryjk_chuqin_rate: 0,
				worktypeOnlineArr: [],
				worktypeAttendanceArr: [],

				zycq_qkkg: 0,
				zycq_todayBanci: 0,
				zycq_todayPlan: 0,
				zycq_qingjia: 0,
				zycq_zccq: 0,
				zycq_cdzt: 0,
				zycq_ywc: 0,
				zycq_jxz: 0,
				zycq_wwc: 0,

				resultOptions: {
					xAxis: {
						show: false,
						type: 'category',
						interval: 0,
					},
					yAxis: {
						show: false,
						type: 'value',
						splitLine: {
							show: false
						}
					},
					series: [{
						type: 'line',
						symbol: 'none',
						smooth: true,
						data: [0, 0, 0, 0, 2, 0, 2, 0],
					}],
					grid: {
						show: true,
						left: 0,
						right: 0,
						top: 0,
						bottom: 0,
						borderWidth: 0
					},
					color: ['#32b16c'],
					textStyle: {
						color: '#fff'
					}
				},
				monitorVisible: false,
				monitorCaseList: [{
					title: '实时作业',
					list: [{
						title: '全部',
						count: 0
					}, {
						title: '在岗',
						count: 0
					}, {
						title: '离岗',
						count: 0
					}, {
						title: '停留',
						count: 0
					}, ]
				}, {
					title: '当日情况',
					list: [{
						title: '全部',
						count: 10
					}, {
						title: '正常',
						count: 4
					}, {
						title: '迟到',
						count: 0
					}, {
						title: '早退',
						count: 0
					}]
				}],
				searchMonitorVisible: false,
				monitorTapsIndex: 0,
				workList: [{
					id: 1,
					name: '赵国义',
					type: '巡查员',
					status: '1',
					rank: '2队队长',
					classes: '晚班 (13:30-17:00)'
				}, {
					id: 2,
					name: '季占刚',
					type: '巡查员',
					status: '1',
					rank: '5队队长',
					classes: '晚班 (13:30-17:00)'
				}, {
					id: 3,
					name: '高秀美',
					type: '巡查员',
					status: '0',
					rank: '6队队长',
					classes: '晚班 (13:30-17:00)'
				}, {
					id: 4,
					name: '季安顺',
					type: '巡查员',
					status: '0',
					rank: '8队队长',
					classes: '晚班 (13:30-17:00)'
				}],
				caseList: [{
					id: 1,
					name: '赵国义',
					type: '巡查员',
					status: '1',
					rank: '2队队长',
					count: 3,
					unusual: false
				}, {
					id: 2,
					name: '季安顺',
					type: '巡查员',
					status: '0',
					rank: '4队队长',
					count: 3,
					unusual: false
				}, ],
				peopleTreeValue: '',
				genDetailVisible: false,
				currentGenListIndex: '',
				personArr: [],
				personConfig: [],
				lTime: new Date().getTime(), // 最后一次点击的时间
				cTime: new Date().getTime(), //当前时间
				timer: null,
				// 作业实况
				workSceneList: [],
				sceneListVisible: false,
				sceneDetailVisible: false,
				sceneDetail: {
					workPlanCars: []
				},
				// 作业实况列表
				workSceneSearchValue: '',
				workSceneSearchSwitch: false,
				workSceneSearchRadio: 'all',
				pageIndex:1,
				pageType:true,
				workSceneType:false,
				state:null
			};
		},
		watch: {
			genDetailVisible(newVal) {
				if (newVal) {
					this.timer = setInterval(() => {
						this.cTime = new Date().getTime();
						if ((this.cTime - this.lTime) > 15000) {
							this.genDetailVisible = false
						}
					}, 1000);
				} else {
					clearInterval(this.timer)
				}
			},
			sceneDetailVisible(newVal) {
				if (!newVal) {
					bus.$emit('drawGridClean', [])
					bus.$emit('redrawMarker')
				}
			},
			sceneListVisible(newVal){
				if(!newVal){
					this.workSceneType = false
					this.workSceneList = []
					this.pageIndex = 1
				}
			}
		},
		computed: {
			...mapGetters({
				'personTreeData': 'getPersonTreeList'
			})
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapActions([
				'updatePersonTreeList',
				'updateElementList'
			]),
			init() {
				this.updatePersonTreeList()
				this.updateElementList()
				bus.$on('onMouseDownPage', data => {
					this.lTime = data
				})
				this.$http.getMapPersonState().then((res) => {
					if (res.code === 200) {
						let data = res.result;
						this.ryjk_total = data.total;
						this.ryjk_online = data.onlineCount;
						this.ryjk_online_rate = data.onlineRate;
						this.ryjk_chuqin = data.chuQinCount;
						this.ryjk_chuqin_rate = data.chuQinRate;
						this.worktypeOnlineArr = data.employeeOnlineIconVoList;
						this.worktypeAttendanceArr = data.employeeAttendanceIconVoList;
					}
				})

				this.$http.getMapPersonWorkState().then((res) => {
					if (res.code === 200) {
						let data = res.result;
						// this.zycq_qkkg = data.isNoWork ;
						// this.zycq_todayBanci = data.todayShift;
						// this.zycq_todayPlan = data.todayPlan;
						// this.zycq_qingjia = data.leave;
						// this.zycq_zccq = data.normalAttendance;
						// this.zycq_cdzt = data.lateAndLeaveEarly;
						this.zycq_qkkg = data.isNoWorkNumber;
						this.zycq_qingjia = data.leaveNumber;
						this.zycq_zccq = data.normalAttendanceNumber;
						this.zycq_cdzt = data.lateAndLeaveEarlyNumber;

						this.zycq_todayBanci = data.todayShiftNumber;
						this.zycq_todayPlan = data.todayPlanNumber;
						this.zycq_ywc = data.completeNumber;
						this.zycq_jxz = data.workIngNumber;
						this.zycq_wwc = data.unCompleteNumber;
					}
				})

				// 人员配置
				this.$http.getMapPersonWorkConfig().then((res) => {
					if (res.code == 200) {
						let data = res.result
						this.personConfig = data
					}
				})
			},
			onClickMonitorTabs(e) {
				this.monitorTapsIndex = e
			},
			// 左 人员监控图标
			onClickMonitor() {
				this.monitorVisible = true
			},
			// 组件 作业实况 类型 点击
			onClickMonitorTab(item) {
				// console.log(item,'父组件');
			},
			// 组件 作业实况 输入框 图标 点击
			onClickMonitorInputIcon() {
				this.searchMonitorVisible = true
			},
			// 组件 作业实况 输入框 清空 点击
			onClickMonitorDeleteInput() {
				this.searchMonitorVisible = false
			},
			onClickMonitorCase(item) {
				item.unusual = !item.unusual
			},
			// 点击 在线情况 出勤情况
			onClickGenItem(index) {
				this.currentGenListIndex = index
				this.genDetailVisible = true
				bus.$emit('hideSearch')
				bus.$emit('hideMapInfoWindow')
				bus.$emit('hideNavbar')
				if (this.currentGenListIndex == 0) {
					this.personArr = this.worktypeOnlineArr
				} else {
					this.personArr = this.worktypeAttendanceArr
				}
			},
			// 在线情况 出勤情况弹框关闭时触发
			onChangeGenDetailVisible(boo) {
				// !boo && (this.currentGenListIndex = '')
			},
			onClickGenDetailItem(title, type, status) {
				bus.$emit('onSearchMenuType', {
					title,
					type,
					status
				})
			},
			// 点击别处关闭左侧要素弹窗
			handlerCloseGenDetail() {
				this.genDetailVisible = false
			},
			// 获取搜索分页列表
			getSearchPageList($state) {
				if(this.workSceneList.length==0){
					setTimeout(() => {
						$state.reset()
					}, 1000);
				}
				this.state = $state
				if(this.workSceneList.length%20!=0||this.workSceneType){
					$state.complete()
					return false
				}
				if(!this.pageType){
					this.pageType = true
					this.pageIndex++
					this.onClickWork(false)
				}
				setTimeout(()=>{
					$state.loaded()
				}, 100);
			},
			reset(){
				// this.state.reset()
				this.sceneListVisible = false
			},
			// 点击查看更多作业实况
			onClickWork(type) {
				let date = new Date()
				let time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
				this.sceneListVisible = true
				this.$http.getDegreeCompletionList({
					startTime: time,
					endTime: time,
					page:this.pageIndex,
					size:20
				}).then((res) => {
					if (res.code === 200) {
						res.result.rows.forEach(item => {
							item.degreeCompletion = item.degreeCompletion * 1
						})
						type
						?this.workSceneList = res.result.rows
						:this.workSceneList.push(...res.result.rows)
						if(res.result.rows.length%20!=0){
							this.workSceneType = true
						}
						setTimeout(()=>{
							this.pageType = false
						}, 10);
					}
				})
			},
			// 过滤作业实况列表页
			filterWorkSceneList(item) {
				let searchBoo = true
				let switchBoo = true
				if (this.workSceneSearchValue) {
					searchBoo = item.planName.indexOf(this.workSceneSearchValue) !== -1
				}
				if (this.workSceneSearchSwitch) {
					switchBoo = item.degreeCompletion != 0
				}
				// 单选框样式暂时隐藏
				// if (this.workSceneSearchRadio == 'work') {
				//   switchBoo = item.rate != 0
				// }
				return searchBoo && switchBoo
			},
			// 作业实况列表点击
			onClickWorkList(item) {
				console.log(item)
				this.sceneDetailVisible = true
				this.sceneDetail = {
					planName: item.planName,
					carWorkType: item.carWorkType,
					workTypeName: item.workTypeName,
					groupName: item.groupName,
					shiftName: item.kaoQinName,
					sbsj: item.startTime,
					xbsj: item.endTime,
					workPlanCars: item.empActualList,
					userName: item.userName,
					userPhone: item.userPhone,
					gridName: item.gridName,
          depName: item.depName
				}
				if (item && item.grid) {
					bus.$emit('drawGridClean', [item])
				}
			},
			// 作业实况详情关闭
			onClickSceneDetailClose() {
				this.sceneDetailVisible = false
			},
			// 作业实况详情页 点击车辆跳转到详情页
			onClickWorkDetail(item) {
				bus.$emit('showMainSearchPersonDetail', {
					id: item.carId,
					title: item.carName
				})
			},
			// 作业实况详情页 点击跳转到轨迹页
			onClickTrack(item) {
				const {
					href
				} = this.$router.resolve({
					name: 'newTrack',
					query: {
						type: 'person',
						id: item.carId,
						carType: item.carType,
						name: item.carName
					}
				})
				window.open(href, '_blank')
			},
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/progress";
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/tabs";
	@import "@/scss/iviewCssReset/input";

	.left-top-detail {

		header {
			line-height: 22px;
		}

		.left-top-person {
			header {
				width: 372px;
				height: 90px;
				font-size: 16px;
				color: #FFFFFF;
				background: url(../../../../assets/new/new_img_top.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30px 34px 0 15px;

				.left-top-person-name {
					width: 160px;
					height: 54px;
					line-height: 54px;
					background-image: url(../../../../assets/new/new_light.png);
					background-size: 100% 100%;
					padding-left: 31px;
					font-weight: bold;
					opacity: .9;
				}
			}

			.left-top-person-footer {
				width: 372px;
				height: 70px;
				background: url(../../../../assets/new/new_img_bottom.png) 0 0 no-repeat;
				background-size: 100% 100%;
			}

			section {
				width: 372px;
				font-size: 16px;
				color: #CCCCCC;
				font-weight: bold;
				line-height: 1;
				background: url(../../../../assets/new/new_img_center.png) 0 0 no-repeat;
				background-size: cover;
				padding: 20px 36px 0;
				overflow: hidden;
				/* margin-top: -1px; */

				.left-top-person-item {
					font-size: 26px;
					color: #FFFFFF;
					font-weight: bold;
					display: flex;
					align-items: center;
					margin-top: 20px;

					img {
						width: 50px;
						height: 50px;
					}

					.left-top-person-item-num {
						font-size: 16px;
						color: #CCCCCC;
						margin: 0 15px 0 15px;
					}

					.left-top-person-icon {
						padding: 11px;
						background: rgba(46, 190, 154, 0.1);
						border-radius: 50%;
						color: #2ebe9a;
						margin-bottom: 6px;
					}

					span {
						color: #fff;
					}
				}
			}
		}
	}

	.left {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 0;
		left: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.left-person {
			padding: 20px 20px 0 40px;

			.left-person-item {
				font-weight: bold;
				display: flex;
				align-items: center;
				color: #dcdcdc;
				margin-bottom: 20px;
			}
		}

		.left-company {
			.left-company-list {
				height: 472px;
				overflow-x: auto;
			}
		}
	}

	.right {
		position: fixed;
		top: 80px;
		bottom: 0;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.right-person {
			padding: 0 32px 0 38px;

			.right-person-item {
				margin-top: 20px;

				.right-person-item-top {
					font-size: 14px;
					color: #FFFFFF;
					font-weight: bold;
					opacity: .8;
					line-height: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 6px;
				}
			}
		}

		.right-work {
			.right-work-img {
				width: 282px;
				height: 1px;
				display: block;
				margin-left: 40px;
			}

			.right-work-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: rgba(255, 255, 255, 0.45);
				padding-right: 10px;
				/* background-image: url(../../../../assets/main/com_bg_max.png); */
				background-position: bottom;
				background-repeat: no-repeat;
				background-size: 100% 100px;
				margin: 10px 20px 10px 35px;
				color: #eee;

				p {
					font-size: 16px;
					color: rgba(255, 255, 255, 0.65);
				}

				span {
					font-size: 24px;
					font-weight: bold;
				}
			}

			.right-work-bottom {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 12px 45px 0;

				.right-work-bottom-item {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 48px;
					line-height: 50px;
					width: 120px;
					color: rgba(255, 255, 255, 1);
					background: url(../../../../assets/new/new_work_bgc.png) 0 0 no-repeat;
					background-size: 100% 100%;
					/* border: 1px solid red;
        padding-left: 10px;
        border: 1px transparent solid;
        border-image: linear-gradient(
            -200deg,
            #fff,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.01)
          )
          1 10; */
					margin-bottom: 12px;
				}
			}
		}

		.right-result {
			.right-result-top {
				display: flex;
				justify-content: space-between;

				.right-result-top-item {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: rgba(255, 255, 255, 0.7);
					text-align: center;
					width: 100px;
					padding-top: 10px;
					height: 84px;
					color: #eee;
					border: 1px solid rgba(255, 255, 255, 0.1);
					border-radius: 8px;
					background-color: rgba(42, 161, 210, 0.4);

					p {
						font-size: 16px;
					}

					span {
						font-size: 24px;
						font-weight: bold;
						margin-top: 8px;
					}

					.right-result-top-icon {
						position: absolute;
						top: 20px;
						left: 24px;
						font-size: 50px;
						color: rgba(255, 255, 255, 0.2);
					}
				}
			}

			.right-result-bottom {
				margin-top: 20px;
				padding: 20px 0;
				background-image: url(../../../../assets/main/road_bg2.png);
				background-repeat: no-repeat;
				background-size: 100% 150px;

				.right-result-bottom-top {
					padding: 0 16px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;
					font-size: 16px;
					color: #eee;
				}
			}
		}
	}

	.monitor {
		.monitor-work {
			overflow: auto;
			margin: 16px 0;
			height: 600px;

			.monitor-work-item {
				display: flex;
				align-items: center;
				margin: 32px 0;

				img {
					width: 48px;
					height: 48px;
					margin-right: 16px;
				}

				.item-right {
					flex: 1;

					.item-right-row1 {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 6px;

						.item-right-row1-left {
							display: flex;
							align-items: center;
							color: #ffffff;
							font-size: 16px;

							span:first-child {
								font-size: 12px;
								color: rgba(255, 255, 255, 0.65);
								margin: 0 4px;
							}
						}

						.item-right-row1-right {
							border-radius: 20px;
							border: 1px solid rgba(255, 255, 255, 0.05);
							padding: 2px;

							div {
								color: #fff;
								background: #32b16c;
								border-radius: 20px;
								padding: 2px 10px;
								font-size: 12px;
								box-shadow: 0 0 6px 0 #000000 inset;
							}

							.status-in {
								background: #b18232;
							}
						}
					}

					.item-right-row2 {
						margin-bottom: 4px;
						color: rgba(255, 255, 255, 0.65);

						span:first-child {
							margin-right: 5px;
						}
					}
				}
			}

			.monitor-work-item:first-child {
				margin-top: 0;
			}

			.monitor-case-item {
				margin-bottom: 32px;

				.monitor-case-item-top {
					display: flex;
					align-items: center;

					img {
						width: 48px;
						height: 48px;
						margin-right: 16px;
					}

					.item-top-right {
						flex: 1;

						.item-top-right-row1 {
							display: flex;
							align-items: center;
							margin-bottom: 6px;
							color: rgba(255, 255, 255, 0.85);
							font-size: 16px;

							span:first-child {
								font-size: 12px;
								color: rgba(255, 255, 255, 0.85);
								margin: 0 4px;
							}
						}

						.item-top-right-row2 {
							margin-bottom: 4px;
							color: rgba(255, 255, 255, 0.65);
							display: flex;
							align-items: center;
							justify-content: space-between;

							.item-top-right-row2-left {
								flex: 1;
							}

							.item-top-right-row2-right {
								display: flex;
								align-items: center;

								.item-top-right-row2-right-status {
									border-radius: 20px;
									border: 1px solid rgba(255, 255, 255, 0.05);
									padding: 2px;
									margin-left: auto;

									div {
										margin-left: 10px;
										color: #fff;
										background: #32b16c;
										border-radius: 20px;
										padding: 2px 10px;
										font-size: 12px;
										box-shadow: 0 0 6px 0 #000000 inset;
									}

									.status-in {
										background: #b18232;
									}
								}
							}
						}

						.item-top-right-row3 {
							display: flex;
							align-items: center;
							color: rgba(255, 255, 255, 0.65);

							div:last-child {
								cursor: pointer;
								margin-left: 10px;
								color: rgb(255, 22, 22);

								.icon {
									transition: 0.2s;
								}

								.icon-in {
									transform: rotate(180deg);
								}
							}
						}
					}
				}

				.monitor-case-item-bottom {
					margin-top: 10px;
					margin-left: 58px;
					padding-top: 10px;
					border-top: 1px solid rgba(255, 255, 255, 0.1);

					.item-bottom-item {
						color: rgba(255, 255, 255, 0.65);
						margin-bottom: 10px;

						.item-bottom-item-name {
							display: flex;
							align-items: center;
							margin-left: -18px;
							margin-bottom: 4px;

							.icon {
								width: 8px;
								height: 1px;
								background-color: rgba(255, 255, 255, 0.65);
							}
						}

						.item-bottom-item-status {
							span {
								color: red;
							}
						}
					}
				}
			}

			.monitor-case-item:first-of-type {
				margin-top: 0;
			}
		}
	}

	.right-top-opction {
		opacity: 0;
	}

	.right-content {
		width: 362px;
		padding-top: 10px;

		header {
			height: 65px;
			background: url(../../../../assets/new/new_img_top.png) 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 0 5px;
			overflow: hidden;

			div {
				width: 160px;
				height: 54px;
				color: #FFFFFF;
				font-weight: bold;
				background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				margin: 10px 0 0 14px;
				padding-top: 10px;
			}

			img {
				width: 18px;
				height: 18px;
				margin: 0 10px 0 18px;
			}
		}

		.right-person {
			background: url(../../../../assets/new/new_img_center.png) 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 0 5px;
			overflow: hidden;
		}

		.left-top-footer {
			height: 68px;
			background: url(../../../../assets/new/new_img_bottom.png) 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 0 5px;
		}
	}


	// 作业实况弹窗
	.modal-detail {
		width: 362px;
		height: 926px;
		background: url(../../../../assets/new/new_img_926.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.modal-detail-top {
		width: 160px;
		height: 54px;
		font-size: 16px;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1;
		font-weight: bold;
		background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		margin: 38px 0 0 21px;

		img {
			width: 18px;
			height: 18px;
			margin: 0 10px 0 18px;
		}
	}

	.right-worklist {
		height: 100%;
		font-size: 14px;
		line-height: 1;
		overflow-y: auto;

		.right-work-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(255, 255, 255, 0.45);
			padding-right: 10px;
			background-image: url(../../../../assets/main/com_bg_max.png);
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: 100% 100px;
			margin-bottom: 10px;
			color: #eee;

			p {
				font-size: 16px;
				color: rgba(255, 255, 255, 0.65);
			}

			span {
				font-size: 24px;
				font-weight: bold;
			}
		}

		.right-work-bottom {
			.right-work-bottom-search {
				width: 310px;
				height: 46px;
				background: url(../../../../assets/new/new_img_search_inp.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				margin: 15px 26px 12px 28px;
				padding: 0 15px;
			}

			.right-work-switch {
				color: #fff;
				font-size: 18px;
				font-weight: 500;
				align-items: center;
				margin-bottom: 20px;
				margin-right: 20px;

				span {
					margin: 0 5px;
				}
			}

			.right-work-line {
				text-align: center;
				font-size: 0;

				img {
					width: 282px;
					height: 1px;
				}
			}

			.right-work-bottom-list {
				height: 680px;
				overflow: auto;
			}

			.right-work-bottom-list::-webkit-scrollbar {
				display: none;
			}

			.right-work-bottom-item {
				color: #eee;
				margin: 20px 30px 0 36px;

				::v-deep .ivu-progress-inner {
					border-radius: 0;
					background: transparent;
					border: 1px solid rgba(255, 255, 255, 0.1);
					padding: 3px 2px;

					.ivu-progress-bg {
						border-radius: 0;
					}
				}
			}
		}
	}

	/* 作业实况 详情 */
	.case-detail-cont {
		height: 100%;
		font-size: 14px;
		line-height: 1;
		overflow: auto;

		.case-detail-cont-msg {
			display: flex;
			justify-content: space-between;
			color: #eee;

			// margin-bottom: 10px;
			.case-detail-cont-msg-msg {
				width: 100%;
				height: 78px;
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
				font-weight: 500;
				padding: 0 36px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				img {
					width: 44px;
					height: 44px;
					border-radius: 44px;
					margin-right: 10px;
				}
			}

			.case-detail-cont-msg-type {
				text-align: right;
				min-width: 110px;
			}

			.case-detail-cont-msg-icon {
				font-size: 24px;
				margin-right: 16px;
				cursor: pointer;
				color: rgba(255, 255, 255, 0.4);
			}
		}

		.case-detail-cont-list {
			height: 720px;
			overflow-y: auto;

			.list-item {
				height: 84px;
				font-size: 14px;
				color: #00baff;
				padding: 0 36px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;

				.list-item-line {
					font-size: 0;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;

					img {
						width: 282px;
						height: 1px;
					}
				}

				.list-item-car {
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}

				.list-item-img {
					width: 18px;
					height: 18px;
				}

				.title {
					font-size: 14px;
					color: #00baff;
					font-weight: 500;
					line-height: 1;
					position: relative;

					p {
						flex: 1;
						display: flex;
						align-items: center;

						span {
							// margin-left: 10px;
						}
					}

					.track {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;
					}
				}

				.cont {
					margin-top: 10px;
					font-size: 16px;
					color: #ffffff;
					opacity: 0.8;

					li {
						font-size: 16px;
						color: #ffffff;

						p:nth-child(1) {}

						p:nth-child(2) {
							margin-right: 5px;
						}
					}
				}
			}

			.list-item:last-child {
				border-bottom: 0;
			}
		}
	}

	::v-deep {
		.ivu-modal-content {
			background: rgba(0, 0, 0, 0);
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
		}

		.ivu-modal-body {
			padding: 0;
		}

		.ivu-progress .ivu-progress-inner {
			border: 1px solid rgba(0, 186, 255, 0.6) !important;
			padding: 0 !important;
		}
		
		.ivu-switch-checked {
		    border-color: #01AEFF;
		    background-color: #01AEFF;
		}
	}
</style>
